<template>
	<view class="login-top">
		<view class="head-portrait"><image src="" mode=""></image></view>
		<p class="p1">悟空CRM</p>
		<p class="p2">实现企业『销售+管理 』全流程</p>
		<view class="Input-box">
			<u-form :model="form" ref="uForm">
				<p class="p3">手机号</p>
				<div class="phoneContainer">
					<u-icon size="40" name="account" class="icon" ></u-icon>
					<u-form-item><u-input v-model="form.name" /></u-form-item>
				</div>
				<p class="p3">密码</p>
				<div class="phoneContainer">
					<u-icon size="40"  name="lock" class="icon" ></u-icon>
				<u-form-item>
					<u-input v-model="form.password" />
				</u-form-item>
				</div>
			</u-form>
		</view>
		<view class="">
		<p class="verification">验证码登录</p>
		<p class="forget-password">忘记密码?</p>
		</view>
		<view class="button">
		<u-button type="primary" shape	="circle" size="default">公有云登录</u-button>
		</view>
		<p class="register">立即注册➜</p>
		<view class="agreement">
			<u-checkbox-group>
				<u-checkbox v-model="checked" :label-disabled="false" shape="circle" active-color="blue">我已阅读并同意《用户协议》与《隐私声明》</u-checkbox>
			</u-checkbox-group>
		</view>
<!-- 		<p class="agreement">我已阅读并同意《用户协议》与《隐私声明》</p>
 -->	</view>
</template>

<script>
export default {
	data() {
		return {
			value: '',
			type: 'text',
			border: true,
			height: 100,
			width: 50,
			checked:true
		
		};
	}
};
</script>

<style lang="scss" scoped>
.login-top {
	.head-portrait {
		height: 150rpx;
		width: 150rpx;
		border-radius: 30rpx;
		background-color: #fff;
		margin: 50rpx 280rpx 0 280rpx;
		box-shadow: #f4f4f5 5rpx 5rpx 30rpx 5rpx; //边框阴影
	}
	.p1 {
		font-size: 40rpx;
		margin: 20rpx 270rpx 20rpx 280rpx;
		font-weight: 17rpx;
	}
	.p2 {
		font-size: 30rpx;
		text-align: center;
		color: #909399;
	}
	.Input-box {
		width: 93%;
		margin: 0 auto;
		.p3 {
			font-size: 30rpx;
			color: #909399;
			margin-bottom: 30rpx;
		}
		.phoneContainer {
			display: flex;
			padding: 0 40rpx;
			border: 1px solid #eee;
			border-radius: 60rpx;
			margin-bottom: 30rpx;
				
			.icon{
				color: #82848a;
				margin-right: 10rpx;
			}
		}
		
	}
		.verification{
			font-size: 28rpx;
			margin-left: 40rpx;
			color: #7489c6;
			float: left;
		}
		.forget-password{
			font-size: 28rpx;
			margin-right: 40rpx;
			color: #7489c6;
			float: right;
		}
		
		.button{
			  clear:both;
				width: 93%;
				margin: 0 auto;
				padding-top: 76rpx;
			}
				.register{
				font-size: 28rpx;
				color: #3e82ea;
        margin:78rpx 305rpx 0 305rpx ;				
				}
				.agreement{
					margin: 361rpx 128rpx 56rpx 120rpx;
				}
}
</style>
